<template>
  <div>
    <div class="main-container" v-show="goods.length">
      <div class="list">
        <div class="item" v-for="g in goods" @click="toDetail(g)">
          <img :src="g.picGoods">
          <span class="productName">{{ g.goodsName }}</span>
          <span>
            <i style="color: red; font-style: normal; font-size: 25px; margin-right: 10px">￥{{g.price}}</i>
            <el-tag size="medium">{{g.discount}}折</el-tag>
          </span>
        </div>
      </div>
      <el-pagination
          hide-on-single-page
          class="page"
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :current-page="currentPage"
          :total="total"
          @current-change="page">
      </el-pagination>
    </div>
    <div v-show="!goods.length">
      <el-empty></el-empty>
    </div>
  </div>
</template>

<script>
export default {
  name: "productList",
  props: ['select', 'search'],
  data() {
    return {
      currentPage: 1,
      total: 0,
      pageSize: 12,
      goods: [],
    }
  },
  methods: {
    page(currentPage){
      console.log(this.search)
      console.log(this.select)
      if(this.select === '1'){
        this.$axios.get(`/goods?currentPage=${currentPage}`)
            .then(res => {
              this.setGoods(res.data.data)
            })
      }else if(this.select === '2'){
        this.$axios.get(`/goodsByName?currentPage=${currentPage}&search=${this.search}`)
            .then(res => {
              this.setGoods(res.data.data)
            })
      }else if(this.select === '3'){
        this.$axios.get(`/goodsByShop?currentPage=${currentPage}&search=${this.search}`)
            .then(res => {
              this.setGoods(res.data.data)
            })
      }
    },
    setGoods(data){
      this.goods = data.records
      this.currentPage = data.current
      this.total = data.total
      this.pageSize = data.size
      this.goods.forEach(g => {
        g.picGoods = "data:image/jpeg;base64,"+g.picGoods
      })
    },
    toDetail(good){
      this.$router.push({
        path: '/home/productDetail',
        query: {
          goodId: good.id
        }
      })
    }
  },
  created() {
    this.page(1)

  },
  mounted() {
    this.$bus.$on("getGoods", () => {
      this.page(1)
      this.$message({
        showClose: true,
        message: "查询成功",
        type: "success"
      })
    })
  }
}
</script>

<style scoped>
.main-container{
  max-height: 1000px;
  width: 960px;
  /*border: 1px solid blue;*/
}
.list{
  max-height: 920px;
  width: 960px;
  display: flex;
  flex-wrap: wrap;
  /*border: 2px solid red;*/
  line-height: 1.769230769230769;
}
.item{
  margin: 10px 18px;
  width: 200px;
  height: 280px;
  /*border: 2px solid green;*/
  background-color: #F5F5F5;
}
.item:hover{
  box-shadow: #B3C0D1 0 0 15px;
  width: 200px;
  cursor: pointer;
}
img{
  width: 100%;
}
.productName{
  display: block;
  padding-left: 5px;
  font-size: 15px;
}
.page{
  margin: 10px 0;
  text-align: center;
}
</style>